<template>
	<view>
		<sunMenu></sunMenu>
		<view class="register-container">
			<h1>會員註冊 / Member Register</h1>

			<view class="form-group">
				<label><text class="required">*</text>姓名 / Name</label>
				<input type="text" v-model="formData.nickName" class="uni-input" />
			</view>

			<view class="form-group">
				<label><text class="required">*</text>電子信箱 / Email</label>
				<input type="email" v-model="formData.email" class="uni-input" />
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>國籍 / Nationality</label>
					<view class="custom-select" :class="{ 'active': isNationalityOpen }">
						<view class="select-trigger" @click="toggleNationality" 
							:class="{ 'placeholder': !formData.nationality }">
							{{ selectedNationalityLabel || '選擇國籍' }}
							<text class="select-arrow">▼</text>
						</view>
						<view class="select-dropdown" v-show="isNationalityOpen">
							<view class="select-options">
								<view v-for="nation in nationalities" :key="nation.value" class="select-option"
									:class="{ 'selected': formData.nationality === nation.value }"
									@click="selectNationality(nation)">
									{{ nation.label }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-group half">
					<label><text class="required">*</text>身分證字號(護照號碼) / ID Number(Passport No)</label>
					<input type="text" v-model="formData.idNumber" />
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>出生年月日 / Birthday</label>
					<view class="birthday-selects">
						<view class="custom-select" :class="{ 'active': isYearOpen }">
							<view class="select-trigger" @click="toggleYear">
								{{ formData.birthYear || '年' }}
								<text class="select-arrow">▼</text>
							</view>
							<view class="select-dropdown" v-show="isYearOpen">
								<view class="select-options">
									<view v-for="year in years" :key="year" class="select-option"
										:class="{ 'selected': formData.birthYear === year }" @click="selectYear(year)">
										{{ year }}
									</view>
								</view>
							</view>
						</view>

						<view class="custom-select" :class="{ 'active': isMonthOpen }">
							<view class="select-trigger" @click="toggleMonth">
								{{ formData.birthMonth ? formData.birthMonth.toString().padStart(2, '0') : '月' }}
								<text class="select-arrow">▼</text>
							</view>
							<view class="select-dropdown" v-show="isMonthOpen">
								<view class="select-options">
									<view v-for="month in months" :key="month" class="select-option"
										:class="{ 'selected': formData.birthMonth === month }"
										@click="selectMonth(month)">
										{{ month.toString().padStart(2, '0') }}
									</view>
								</view>
							</view>
						</view>

						<view class="custom-select" :class="{ 'active': isDayOpen }">
							<view class="select-trigger" @click="toggleDay">
								{{ formData.birthDay ? formData.birthDay.toString().padStart(2, '0') : '日' }}
								<text class="select-arrow">▼</text>
							</view>
							<view class="select-dropdown" v-show="isDayOpen">
								<view class="select-options">
									<view v-for="day in days" :key="day" class="select-option"
										:class="{ 'selected': formData.birthDay === day }" @click="selectDay(day)">
										{{ day.toString().padStart(2, '0') }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-group half">
					<label><text class="required">*</text>性別 / Gender</label>
					<view class="radio-group">
						<view class="radio-item" :class="{ active: formData.sex === '0' }" @click="selectSex('0')">
							<view class="radio-circle">
								<view class="radio-inner"></view>
							</view>
							<text>男</text>
						</view>
						<view class="radio-item" :class="{ active: formData.sex === '1' }" @click="selectSex('1')">
							<view class="radio-circle">
								<view class="radio-inner"></view>
							</view>
							<text>女</text>
						</view>
					</view>
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>聯絡電話(手機) / Mobile</label>
					<input type="tel" v-model="formData.phonenumber" />
				</view>
				<view class="form-group half">
					<label>聯絡電話(市話) / TEL</label>
					<input type="tel" v-model="formData.tel" />
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>縣市 / City</label>
					<view class="custom-select" :class="{ 'active': isCityOpen }">
						<view class="select-trigger" @click="toggleCity">
							{{ selectedCityLabel || '選擇縣市' }}
							<text class="select-arrow">▼</text>
						</view>
						<view class="select-dropdown" v-show="isCityOpen">
							<view class="select-options">
								<view v-for="city in cities" :key="city.value" class="select-option"
									:class="{ 'selected': formData.city === city.value }" @click="selectCity(city)">
									{{ city.label }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-group half">
					<label><text class="required">*</text>鄉鎮市區 / Area</label>
					<view class="custom-select" :class="{ 'active': isAreaOpen }">
						<view class="select-trigger" @click="toggleArea" :class="{ 'disabled': !formData.city }">
							{{ selectedAreaLabel || '選擇地區' }}
							<text class="select-arrow">▼</text>
						</view>
						<view class="select-dropdown" v-show="isAreaOpen && formData.city">
							<view class="select-options">
								<view v-for="area in areas" :key="area.value" class="select-option"
									:class="{ 'selected': formData.area === area.value }" @click="selectArea(area)">
									{{ area.label }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>路名 / Road</label>
					<view class="custom-select" :class="{ 'active': isRoadOpen }">
						<view class="select-trigger" @click="toggleRoad" :class="{ 'disabled': !formData.area }">
							{{ selectedRoadLabel || '選擇路名' }}
							<text class="select-arrow">▼</text>
						</view>
						<view class="select-dropdown" v-show="isRoadOpen && formData.area">
							<view class="select-options">
								<view v-for="road in roads" :key="road.value" class="select-option"
									:class="{ 'selected': formData.road === road.value }" @click="selectRoad(road)">
									{{ road.label }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-group half">
					<label><text class="required">*</text>路 / 巷 / 弄 / 號 / Road / Lane / Number</label>
					<input type="text" v-model="formData.address" />
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label>緊急連絡人 / Emergency Contact Person</label>
					<input type="text" v-model="formData.emergencyContact" />
				</view>
				<view class="form-group half">
					<label>緊急連絡人電話 / Emergency Mobile</label>
					<input type="tel" v-model="formData.emergencyPhone" />
				</view>
			</view>

			<view class="form-row">
				<view class="form-group half">
					<label><text class="required">*</text>密碼 / Password</label>
					<input type="password" v-model="formData.password" />
				</view>
				<view class="form-group half">
					<label><text class="required">*</text>密碼確認 / Confirm Password</label>
					<input type="password" v-model="formData.confirmPassword" />
				</view>
			</view>

			<button class="submit-btn" @click="onSubmit">送出</button>
		</view>
	</view>
</template>

<script>
	import sunMenu from '../../components/sun-menu/sun-menu.vue'
	import citiesData from '@/static/data/cities.json'
	import areasData from '@/static/data/areas.json'
	import roadsData from '@/static/data/roads.json'
	import {
		register
	} from '@/api/login'

	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				formData: {
					nickName: '',
					email: '',
					nationality: '',
					idNumber: '',
					sex: '',
					city: '',
					area: '',
					road: '',
					address: ''
				},
				nationalities: [{
						value: 'AFGHANISTAN',
						label: 'AFGHANISTAN'
					},
					{
						value: 'ALBANIA',
						label: 'ALBANIA'
					},
					{
						value: 'ALGERIA',
						label: 'ALGERIA'
					},
					{
						value: 'ARGENTINA',
						label: 'ARGENTINA'
					},
					{
						value: 'AUSTRALIA',
						label: 'AUSTRALIA'
					},
					{
						value: 'AUSTRIA',
						label: 'AUSTRIA'
					},
					{
						value: 'BANGLADESH',
						label: 'BANGLADESH'
					},
					{
						value: 'BELGIUM',
						label: 'BELGIUM'
					},
					{
						value: 'BRAZIL',
						label: 'BRAZIL'
					},
					{
						value: 'CAMBODIA',
						label: 'CAMBODIA'
					},
					{
						value: 'CANADA',
						label: 'CANADA'
					},
					{
						value: 'CHILE',
						label: 'CHILE'
					},
					{
						value: 'CHINA',
						label: 'CHINA'
					},
					{
						value: 'COLOMBIA',
						label: 'COLOMBIA'
					},
					{
						value: 'CZECH',
						label: 'CZECH REPUBLIC'
					},
					{
						value: 'DENMARK',
						label: 'DENMARK'
					},
					{
						value: 'EGYPT',
						label: 'EGYPT'
					},
					{
						value: 'FINLAND',
						label: 'FINLAND'
					},
					{
						value: 'FRANCE',
						label: 'FRANCE'
					},
					{
						value: 'GERMANY',
						label: 'GERMANY'
					},
					{
						value: 'GREECE',
						label: 'GREECE'
					},
					{
						value: 'HONG_KONG',
						label: 'HONG KONG'
					},
					{
						value: 'HUNGARY',
						label: 'HUNGARY'
					},
					{
						value: 'ICELAND',
						label: 'ICELAND'
					},
					{
						value: 'INDIA',
						label: 'INDIA'
					},
					{
						value: 'INDONESIA',
						label: 'INDONESIA'
					},
					{
						value: 'IRAN',
						label: 'IRAN'
					},
					{
						value: 'IRAQ',
						label: 'IRAQ'
					},
					{
						value: 'IRELAND',
						label: 'IRELAND'
					},
					{
						value: 'ISRAEL',
						label: 'ISRAEL'
					},
					{
						value: 'ITALY',
						label: 'ITALY'
					},
					{
						value: 'JAPAN',
						label: 'JAPAN'
					},
					{
						value: 'JORDAN',
						label: 'JORDAN'
					},
					{
						value: 'KAZAKHSTAN',
						label: 'KAZAKHSTAN'
					},
					{
						value: 'KENYA',
						label: 'KENYA'
					},
					{
						value: 'KOREA',
						label: 'KOREA'
					},
					{
						value: 'KUWAIT',
						label: 'KUWAIT'
					},
					{
						value: 'LAOS',
						label: 'LAOS'
					},
					{
						value: 'MALAYSIA',
						label: 'MALAYSIA'
					},
					{
						value: 'MALDIVES',
						label: 'MALDIVES'
					},
					{
						value: 'MEXICO',
						label: 'MEXICO'
					},
					{
						value: 'MONGOLIA',
						label: 'MONGOLIA'
					},
					{
						value: 'MOROCCO',
						label: 'MOROCCO'
					},
					{
						value: 'MYANMAR',
						label: 'MYANMAR'
					},
					{
						value: 'NEPAL',
						label: 'NEPAL'
					},
					{
						value: 'NETHERLANDS',
						label: 'NETHERLANDS'
					},
					{
						value: 'NEW_ZEALAND',
						label: 'NEW ZEALAND'
					},
					{
						value: 'NIGERIA',
						label: 'NIGERIA'
					},
					{
						value: 'NORWAY',
						label: 'NORWAY'
					},
					{
						value: 'PAKISTAN',
						label: 'PAKISTAN'
					},
					{
						value: 'PANAMA',
						label: 'PANAMA'
					},
					{
						value: 'PERU',
						label: 'PERU'
					},
					{
						value: 'PHILIPPINES',
						label: 'PHILIPPINES'
					},
					{
						value: 'POLAND',
						label: 'POLAND'
					},
					{
						value: 'PORTUGAL',
						label: 'PORTUGAL'
					},
					{
						value: 'QATAR',
						label: 'QATAR'
					},
					{
						value: 'ROMANIA',
						label: 'ROMANIA'
					},
					{
						value: 'RUSSIA',
						label: 'RUSSIA'
					},
					{
						value: 'SAUDI_ARABIA',
						label: 'SAUDI ARABIA'
					},
					{
						value: 'SINGAPORE',
						label: 'SINGAPORE'
					},
					{
						value: 'SOUTH_AFRICA',
						label: 'SOUTH AFRICA'
					},
					{
						value: 'SPAIN',
						label: 'SPAIN'
					},
					{
						value: 'SRI_LANKA',
						label: 'SRI LANKA'
					},
					{
						value: 'SWEDEN',
						label: 'SWEDEN'
					},
					{
						value: 'SWITZERLAND',
						label: 'SWITZERLAND'
					},
					{
						value: 'TAIWAN',
						label: 'TAIWAN'
					},
					{
						value: 'THAILAND',
						label: 'THAILAND'
					},
					{
						value: 'TURKEY',
						label: 'TURKEY'
					},
					{
						value: 'UKRAINE',
						label: 'UKRAINE'
					},
					{
						value: 'UAE',
						label: 'UNITED ARAB EMIRATES'
					},
					{
						value: 'UK',
						label: 'UNITED KINGDOM'
					},
					{
						value: 'USA',
						label: 'UNITED STATES'
					},
					{
						value: 'UZBEKISTAN',
						label: 'UZBEKISTAN'
					},
					{
						value: 'VENEZUELA',
						label: 'VENEZUELA'
					},
					{
						value: 'VIETNAM',
						label: 'VIETNAM'
					},
					{
						value: 'YEMEN',
						label: 'YEMEN'
					}
				],
				years: Array.from({
					length: 102
				}, (_, i) => 2024 - i),
				months: Array.from({
					length: 12
				}, (_, i) => i + 1),
				days: Array.from({
					length: 31
				}, (_, i) => i + 1),
				cities: citiesData.cities,
				cityAreas: areasData,
				cityRoads: roadsData,
				areas: [],
				roads: [],
				isNationalityOpen: false,
				isYearOpen: false,
				isMonthOpen: false,
				isDayOpen: false,
				isCityOpen: false,
				isAreaOpen: false,
				isRoadOpen: false,
			}
		},
		computed: {
			selectedNationalityLabel() {
				const selected = this.nationalities.find(n => n.value === this.formData.nationality)
				return selected ? selected.label : ''
			},
			selectedCityLabel() {
				const selected = this.cities.find(c => c.value === this.formData.city)
				return selected ? selected.label : ''
			},
			selectedAreaLabel() {
				const selected = this.areas.find(a => a.value === this.formData.area)
				return selected ? selected.label : ''
			},
			selectedRoadLabel() {
				const selected = this.roads.find(r => r.value === this.formData.road)
				return selected ? selected.label : ''
			}
		},
		watch: {
			'formData.birthYear'() {
				this.adjustDays();
			},
			'formData.birthMonth'() {
				this.adjustDays();
			},
			'formData.city'(newCity) {
				if (newCity) {
					this.areas = this.cityAreas[newCity] || [];
				} else {
					this.areas = [];
				}
				this.formData.area = '';
				this.formData.road = '';
				this.roads = [];
			},
			'formData.area'(newArea) {
				if (newArea && this.formData.city) {
					this.roads = this.cityRoads[this.formData.city]?.[newArea] || [];
				} else {
					this.roads = [];
				}
				this.formData.road = '';
			}
		},
		methods: {
			validateForm() {
				const requiredFields = {
					nickName: '姓名',
					nationality: '國籍',
					sex: '性別',
					birthYear: '出生年',
					birthMonth: '出生月',
					birthDay: '出生日',
					phonenumber: '手機號碼',
					email: 'Email',
					city: '縣市',
					area: '地區',
					road: '路名',
					address: '詳細地址',
					password: '密碼',
					confirmPassword: '確認密碼'
				};
				let errors = [];
				// 檢查每個必填欄位
				for (const [field, label] of Object.entries(requiredFields)) {
					if (!this.formData[field]) {
						errors.push(`${label}不能為空`);
					}
				}
				// 電子郵箱格式驗證
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (this.formData.email && !emailRegex.test(this.formData.email)) {
					errors.push('請輸入有效的電子郵箱地址');
				}
				// 特殊驗證：密碼確認
				if (this.formData.password !== this.formData.confirmPassword) {
					errors.push('密碼與確認密碼不一致');
				}
				if (this.formData.phonenumber == '' || this.formData.phonenumber == undefined) {
					errors.push('手機號不能爲空');
				}
				// 打印當前表單數據，用於調試
				console.log('當前表單數據：', this.formData);
				return {
					isValid: errors.length === 0,
					errors
				};
			},
			onSubmit() {
				const validation = this.validateForm();
				if (!validation.isValid) {
					// 顯示錯誤信息
					console.log('表單驗證錯誤：', validation.errors);
					uni.showToast({
						title: validation.errors[0],
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// 格式化生日和地址
				const birthday =
					`${this.formData.birthYear}-${String(this.formData.birthMonth).padStart(2, '0')}-${String(this.formData.birthDay).padStart(2, '0')}`;
				this.formData.birthday = birthday
				console.log('formData：', this.formData);
				const fullAddress =
					`${this.selectedCityLabel} ${this.selectedAreaLabel} ${this.selectedRoadLabel} ${this.formData.address}`;
				console.log('完整地址：', fullAddress);
				// 驗證通過的提示
				this.$modal.loading("注册中，请耐心等待...")
				this.register()
			},
			// 用户注册
			async register() {
				register(this.formData).then(res => {
					this.$modal.closeLoading()
					uni.showModal({
						title: "系统提示",
						content: "恭喜你，您的账号 " + this.formData.nickName + " 注册成功！",
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/myLogin/myLogin'
								});
							}
						}
					})
				})
			},
			selectSex(value) {
				this.formData.sex = value;
			},
			// 可選：添加搜索功能
			searchNationality(searchText) {
				return this.nationalities.filter(nation =>
					nation.label.toLowerCase().includes(searchText.toLowerCase())
				);
			},
			adjustDays() {
				const year = this.formData.birthYear;
				const month = this.formData.birthMonth;

				if (!year || !month) return;

				const daysInMonth = new Date(year, month, 0).getDate();
				this.days = Array.from({
					length: daysInMonth
				}, (_, i) => i + 1);

				// 如果選中的日期超過當月最大天數，重置日期
				if (this.formData.birthDay > daysInMonth) {
					this.formData.birthDay = '';
				}
			},
			onCityChange() {
				this.formData.area = '';
				this.areas = this.cityAreas[this.formData.city] || [];
			},
			toggleNationality() {
				this.isNationalityOpen = !this.isNationalityOpen
			},
			selectNationality(nation) {
				this.formData.nationality = nation.label
				this.isNationalityOpen = false
			},
			// 點擊外部時關閉下拉框
			closeNationality(e) {
				if (!e.target.closest('.custom-select')) {
					this.isNationalityOpen = false
				}
			},
			toggleYear() {
				this.isYearOpen = !this.isYearOpen
			},
			selectYear(year) {
				this.formData.birthYear = year
				this.isYearOpen = false
			},
			toggleMonth() {
				this.isMonthOpen = !this.isMonthOpen
			},
			selectMonth(month) {
				this.formData.birthMonth = month
				this.isMonthOpen = false
			},
			toggleDay() {
				this.isDayOpen = !this.isDayOpen
			},
			selectDay(day) {
				this.formData.birthDay = day
				this.isDayOpen = false
			},
			toggleCity() {
				this.isCityOpen = !this.isCityOpen
			},
			selectCity(city) {
				this.formData.city = city.value
				this.formData.cityLabel = city.label
				this.isCityOpen = false
			},
			toggleArea() {
				this.isAreaOpen = !this.isAreaOpen
			},
			selectArea(area) {
				this.formData.area = area.value
				this.formData.areaLabel = area.label
				this.isAreaOpen = false
			},
			toggleRoad() {
				this.isRoadOpen = !this.isRoadOpen
			},
			selectRoad(road) {
				this.formData.road = road.value
				this.formData.roadLabel = road.label
				this.isRoadOpen = false
			}
		},
		mounted() {
			document.addEventListener('click', this.closeNationality)
		},
		beforeDestroy() {
			document.removeEventListener('click', this.closeNationality)
		}
	}
</script>

<style>
	.register-container {
		max-width: 800px;
		margin: 30px auto;
		padding: 40px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	h1 {
		text-align: center;
		color: #333;
		margin-bottom: 40px;
		font-size: 28px;
		font-weight: 600;
	}

	.form-group {
		margin-bottom: 25px;
	}

	.form-row {
		display: flex;
		gap: 30px;
		margin-bottom: 10px;
	}

	.half {
		width: 50%;
	}

	label {
		display: block;
		margin-bottom: 8px;
		color: #555;
		font-size: 14px;
		font-weight: 500;
	}

	.required {
		color: #ff4d4f;
		margin-right: 4px;
	}

	/* 統一輸入框樣式 */
	.uni-input,
	input,
	select {
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		background-color: #f8fafc;
		box-sizing: border-box;
	}

	/* 生日選擇器樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects select {
		flex: 1;
		text-align: center;
		padding-right: 24px;
		/* 為下拉箭頭留出空間 */
	}

	/* 下拉框樣式 */
	.birthday-selects .uni-input {
		height: 44px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 8px center;
	}

	/* 下拉框懸停效果 */
	.birthday-selects .uni-input:hover {
		border-color: #4299e1;
	}

	/* 下拉框聚焦效果 */
	.birthday-selects .uni-input:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}

	/* 選項樣式 */
	.birthday-selects .uni-input option {
		padding: 8px;
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		.birthday-selects {
			gap: 8px;
		}

		.birthday-selects .uni-input {
			font-size: 16px;
			/* 防止 iOS 縮放 */
			padding-right: 20px;
		}
	}

	/* 性別選擇器樣式 */
	.radio-group {
		display: flex;
		gap: 20px;
		margin-top: 40rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}

	.radio-circle {
		width: 18px;
		height: 18px;
		border: 1px solid #dcdfe6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}

	.radio-inner {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #81D8D0;
		opacity: 0;
		transition: all 0.3s;
	}

	.radio-item.active .radio-circle {
		border-color: #81D8D0;
	}

	.radio-item.active .radio-inner {
		opacity: 1;
	}

	/* 提交按鈕樣式 */
	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: #3182ce;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 500;
		margin-top: 20px;
		text-align: center;
	}

	.submit-btn:active {
		background-color: #2c5282;
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		.register-container {
			padding: 20px;
			margin: 15px;
		}

		.form-row {
			flex-direction: column;
			gap: 15px;
		}

		.half {
			width: 100%;
		}
	}

	/* 錯誤狀態 */
	.uni-input.error,
	input.error,
	select.error {
		border-color: #ff4d4f;
		background-color: #fff2f0;
	}

	/* 禁用狀態 */
	.uni-input[disabled],
	input[disabled],
	select[disabled] {
		background-color: #f5f5f5;
		color: #999;
	}

	/* 密碼輸入框 */
	input[type="password"] {
		letter-spacing: 4px;
	}

	/* 下拉選擇框樣式 */
	select {
		width: 100%;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 30px;
	}

	select:disabled {
		background-color: #f5f5f5;
		cursor: not-allowed;
		opacity: 0.7;
	}

	select:hover:not(:disabled) {
		border-color: #4299e1;
	}

	select:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		select {
			font-size: 16px;
		}
	}

	.custom-select {
		position: relative;
		width: 100%;
	}

	.select-trigger {
		height: 44px;
		line-height: 40px;
		padding: 0 30px 0 12px;
		/* 右側留出箭頭空間 */
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #606266;
		transition: all 0.2s;
		position: relative;
	}

	/* 占位符文字顏色 */
	.select-trigger.placeholder {
		color: #c0c4cc;
	}

	/* 箭頭樣式 */
	.select-arrow {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		color: #c0c4cc;
		transition: transform 0.2s;
	}

	/* 激活狀態的箭頭 */
	.custom-select.active .select-arrow {
		transform: translateY(-50%) rotate(180deg);
		color: #409eff;
	}

	/* 下拉框激活狀態 */
	.custom-select.active .select-trigger {
		border-color: #409eff;
	}

	/* 禁用狀態 */
	.select-trigger.disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		color: #c0c4cc;
		cursor: not-allowed;
	}

	/* 下拉面板 */
	.select-dropdown {
		position: absolute;
		top: calc(100% + 5px);
		left: 0;
		right: 0;
		background: white;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 1000;
		margin: 0;
		padding: 5px 0;
	}

	/* 下拉選項容器 */
	.select-options {
		max-height: 274px;
		overflow-y: auto;
		padding: 6px 0;
	}

	/* 下拉選項 */
	.select-option {
		height: 34px;
		line-height: 34px;
		padding: 0 20px;
		font-size: 14px;
		color: #606266;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 選項懸停狀態 */
	.select-option:hover {
		background-color: #f5f7fa;
	}

	/* 選中狀態 */
	.select-option.selected {
		color: #409eff;
		font-weight: 700;
		background-color: #f5f7fa;
	}

	/* 自定義滾動條 */
	.select-options::-webkit-scrollbar {
		width: 6px;
	}

	.select-options::-webkit-scrollbar-track {
		background: #fff;
	}

	.select-options::-webkit-scrollbar-thumb {
		background: #e4e7ed;
		border-radius: 3px;
	}

	.select-options::-webkit-scrollbar-thumb:hover {
		background: #c0c4cc;
	}

	/* 生日選擇器特殊樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects .custom-select {
		flex: 1;
	}

	/* 懸停效果 */
	.select-trigger:hover:not(.disabled) {
		border-color: #c0c4cc;
	}

	/* 聚焦效果 */
	.custom-select.active .select-trigger:not(.disabled) {
		border-color: #409eff;
	}

	/* 錯誤狀態 */
	.custom-select.error .select-trigger {
		border-color: #f56c6c;
	}

	/* 下拉框動畫 */
	.select-dropdown {
		transform-origin: center top;
		animation: dropDown 0.2s ease-in-out;
	}

	@keyframes dropDown {
		0% {
			transform: scaleY(0);
			opacity: 0;
		}

		100% {
			transform: scaleY(1);
			opacity: 1;
		}
	}

	/* 響應式調整 */
	@media screen and (max-width: 768px) {
		.select-trigger {
			height: 88rpx;
			line-height: 36px;
		}

		.select-option {
			height: 30px;
			line-height: 30px;
		}

		.birthday-selects {
			gap: 8px;
		}
	}
</style>